<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../lib/reset.css">
	<style>
		/*.dialog {
			width: 300px;
			height: 200px;
			background-color: red;

			position: fixed;
			top: 50%;
			left: 50%;
			margin: -100px 0 0 -150px;

			font-size: 30px;
		}

		.masker {
			position: fixed;
			background-color: #000;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			opacity: 0.5;
		}*/

		body {
			height: 2000px;
		}

		.dialog {
			width: 380px;
			height: 220px;
			background-color: red;

			position: fixed;
			top: 50%;
			left: 50%;
			margin-top: -110px;
			margin-left: -190px;

			/*opacity: 1;*/
		}

		.masker {
			width: 100%;
			height: 100%;
			background-color: #000;

			position: fixed;
			top: 0;
			opacity: 0.2;
		}
	</style>
</head>
<body>

	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
		<li>item6</li>
		<li>item7</li>
		<li>item8</li>
		<li>item9</li>
		<li>item10</li>
		<li>item11</li>
		<li>item12</li>
		<li>item13</li>
		<li>item14</li>
		<li>item15</li>
		<li>item16</li>
		<li>item17</li>
		<li>item18</li>
		<li>item19</li>
		<li>item20</li>
	</ul>

	<a href="http://www.baidu.com">baidu</a>

	<!-- <div class="masker">
		<div class="dialog">我是对话框</div>
	</div> -->

	<div class="masker-wp">
		<div class="masker"></div>
		<div class="dialog">
			我是一个对话框
		</div>
	</div>
	
</body>
</html>